<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
    <div>
      <div class="breadcrumb-container input-val-box">
        <div class="input-top">
          <el-input v-model="searchword" placeholder="教辅具名称" @keyup.enter.native="searchBtn" size="small"></el-input>
        </div>
        <el-button type="primary" size="small" @click="searchBtn"><i class="el-icon-search"></i>搜索</el-button>
        <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
      </div>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c">
          <el-table-column
                  prop="create_time"
                  label="申请时间"
                  width="240">
          </el-table-column>
          <el-table-column
                  prop="class_id.class_name"
                  label="申请班级"
                  width="140">
          </el-table-column>
          <el-table-column
                  prop="user_id"
                  label="申请老师"
                  width="140">
          </el-table-column>
          <el-table-column
                  label="状态"
                  width="120">
            <template slot-scope="scope">
              <span :class="scope.row.status==1?'c-danger':'c-success'">{{scope.row.status==1?'待确认':'已确认'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="lingyongList(scope.row)" v-if="scope.row.status==1">申请事项</el-button>
              <el-button size="small" @click="lingyongList(scope.row)" v-else>详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="pageTotal"
              :page-size="pageSize"
              :current-page="page"
              @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <div v-if="editForm">
      <!--教辅具添加编辑-->
      <el-dialog :title="tieleName" :visible.sync="editFormVisible" :close-on-click-modal="false" custom-class="iframeBoxdialog">
        <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
          <el-form-item label="缩略图：" prop="pic">
            <div v-if="tieleName=='添加'">
              <img src="@/assets/imageAdmin/defultimgline.png" alt="" @click="imgDefult" v-if="addImgSrc==''" width="80">
              <img :src="addImgSrc" alt="" @click="imgDefult">
            </div>
            <div v-else>
              <img :src="imgsrc+addForm.pic" alt="" @click="imgDefult" class="editimgbox">
            </div>
          </el-form-item>
          <el-form-item label="教辅具名称：" prop="name">
            <div v-if="tieleName=='添加'">
              <el-input v-model="addForm.name" auto-complete="off" placeholder="填写教辅具名称"></el-input>
            </div>
            <div v-else>
              {{addForm.name}}
            </div>
          </el-form-item>
          <el-form-item label="入库数量：" prop="number">
            <div v-if="tieleName=='添加'">
              <el-input v-model="addForm.num" auto-complete="off" placeholder="填写数量"></el-input>
            </div>
            <div v-else>
              {{addForm.num}}
            </div>
          </el-form-item>
          <el-form-item label="教辅具备注：">
            <div v-if="tieleName=='添加'">
              <el-input type="textarea" v-model="addForm.desc" placeholder="填写备注"></el-input>
            </div>
            <div v-else>
              {{addForm.desc!==''?addForm.desc:'暂无数据'}}
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit" :loading="editLoading" v-show="tieleName=='添加'">提交
          </el-button>
        </div>
      </el-dialog>
      <!-- 领用记录 -->
      <el-dialog title="领用记录" :visible.sync="lingyongVisible" custom-class="iframeBoxdialog">
        <el-table :data="taskList"
                  height="300"
                  :stripe="tableStripe"
                  :border="tableBorder"
                  tooltip-effect="dark"
                  ref="table">
          <el-table-column label="领用时间" prop="create_time"></el-table-column>
          <el-table-column label="领用人" prop="user_id"></el-table-column>
          <el-table-column label="领用数量" prop="number"></el-table-column>
          <el-table-column label="核销数量" prop="scap"></el-table-column>
          <el-table-column label="报告图" prop="scap">
            <template slot-scope="scope">
              <img :src="imgsrc+scope.row.pic" alt="" class="imgsocc">
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <!--<el-button @click="dialogTableVisible = false">取 消</el-button>-->
          <el-button type="primary" @click="lingyongVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!--领用，转借-->
      <el-dialog title="领用/转借" :visible.sync="getVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <el-form-item label="上传教辅具图片" prop="pic">
            <img src="@/assets/imageAdmin/defultimgline.png" alt="" @click="imgDefult" v-if="addImgSrc==''" width="80">
            <img :src="addImgSrc" alt="" @click="imgDefult" v-else width="100">
          </el-form-item>
          <el-form-item label="接收数量" prop="number">
            <el-input v-model="editForm.number" auto-complete="off" placeholder="填写接收数量"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="editForm.desc" placeholder="填写备注"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="getVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <form style="display: none" enctype="multipart/form-data">
      <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" id="uploadFile"/>
    </form>
    <iframe id="show-iframe" frameborder=0 name="showHere" scrolling=auto :src="iframeSrc" class="iframeBoxLine"
            v-if="iframeState"></iframe>
    <div class="iframeBoxBody" v-show="iframeState_img">
      <img src="@/assets/imageAdmin/closeimg.png" alt="" @click.stop="iframeState_img=false">
      <img :src="iframeSrc_img" alt="" class="iframeBoxLine_img">
    </div>
  </div>
  </div>
</template>

<script>
  // import $ from 'jquery'

  export default {
    data () {
      return {
        loading: false,
        imgsrc: 'http://doc.layoxx.com/',
        addImgSrc: '', // 默认图片
        addImgFiles: null,
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        searchword: '', // 搜索名称
        tieleName: '', // 弹窗标题
        iframeState: false, // 下载excel所需要的
        iframeSrc: '', // 导出excel链接
        iframeState_img: false,
        iframeSrc_img: '',
        addForm: {
          name: '', // 名称
          desc: '',
          num: '', // 库存
          pic: '' // 缩略图
        }, // 编辑界面数据
        editForm: {
          // name: '', // 名称
          id: '',
          desc: '',
          number: '', // 库存
          pic: '' // 缩略图
        }, // 编辑界面数据
        addFormRules: {
          name: [
            {required: true, message: '请填写教辅具名称', trigger: 'blur'}
          ],
          pic: [
            {required: true, message: '请上传接收图', trigger: 'blur'}
          ],
          num: [
            {required: true, message: '请填写接收数量', trigger: 'blur'}
          ]
        }, // 添加教辅具-表单验证不能为空规则
        editFormRules: {
          pic: [
            {required: true, message: '请上传接收图', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '请填写接收数量', trigger: 'blur'}
          ]
        }, // 领取教辅具-表单验证不能为空规则
        editLoading: false,
        addLoading: false,
        editFormVisible: false, // 编辑界面是否显示
        arryList: null, // 数据列表
        page: 1,
        pageSize: 20, // 每页显示个数选择器的选项设置
        pageTotal: 0, // index总页数
        getVisible: false, // 教辅具领用转借
        taskList: null, // 领用记录数据
        lingyongVisible: false, // 领用记录显示
        img1: [],
        formData: '', // 上传图片
        goodsListNumber: 0 // 每列教辅具总数量
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        console.log('获取通讯信息')
        let self_ = this
        this.$fetch('tools_apply/disList', {p: this.page}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.arryList = response.list.data
            this.pageTotal = response.list.total
            self_.$previewRefresh()
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 刷新页面
      refreshFn () {
        this.page = 1
        this.InitFn()
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      preveimg (e) {
        this.iframeState_img = true
        this.iframeSrc_img = e
      },
      // 搜索
      searchBtn () {
        console.log('搜索内容：', this.searchWord)
        this.page = 1
        this.InitFn()
      },
      // 添加教辅具 显示弹窗
      addBook () {
        this.addForm = {
          name: '', // 名称
          desc: '',
          number: '', // 库存
          pic: '/tmp/uploads/20190424/e991f68defee33823b1dbbd83a73e644.png' // 缩略图
        } // 编辑界面数据
        this.addImgSrc = ''
        this.addImgFiles = null
        this.editFormVisible = true
        this.tieleName = '添加'
      },
      // 教辅具详情
      handleEdit (index, row) {
        console.log('编辑数据index', index)
        console.log('编辑数据row', row)
        this.addForm = row
        this.editFormVisible = true
        this.tieleName = '编辑'
      },
      // 领用 转借
      getEdit (index, row) {
        this.editForm = {
          id: '',
          desc: '',
          number: '', // 库存
          pic: '' // 缩略图
        }
        this.editForm.id = row.id
        this.goodsListNumber = row.num
        this.addImgSrc = ''
        this.addImgFiles = ''
        this.getVisible = true
      },
      // 选择图片
      imgDefult () {
        this.$el.querySelector('.hiddenInput').click()
      },
      // 上传图片 在打开文件夹选中图片确认后，执行handleFile函数
      handleFile (event) {
        // 此处不能使用event.target，否则手机上不能显示
        let file = document.querySelector('#uploadFile')
        let formData = new FormData()
        formData.append('file', file.files[0])
        this.formData = formData
        this.addImgSrc = this.getObjectURL(file.files[0])
        this.addImgFiles = file.files[0]
        this.editForm.pic = formData
        console.log('上传图片：', this.addForm)
        // 接下来就可以用 ajax 提交 formData
      },
      // 上传图片请求
      imguploading (option) {
        let _self = this
        $.ajax({
          type: 'post',
          url: 'http://doc.layoxx.com/admin/upload/oldupload',
          data: this.formData,
          processData: false,
          // 告诉jQuery不要去设置Content-Type请求头
          contentType: false,
          dataType: 'json',
          success: function (data) {
            console.log(data)
            if (data.code === 0) {
              // option add 添加教辅具 apply 申请领用教辅具
              console.log(data.data.name)
              if (option === 'add') {
                _self.addForm.pic = data.data.name
              } else {
                _self.editForm.pic = data.data.name
              }
              _self.submitInfo(option)
            } else {
              _self.$message.error('失败')
            }
          },
          error: function (data) {
            this.$message.error('失败')
          }
        })
      },
      // 提交添加 领用教辅具 信息
      submitInfo (option) {
        // option add 添加教辅具 apply 领用教辅具
        let url_ = 'tools/add'
        let data = this.addForm
        let _self = this
        if (option === 'apply') {
          url_ = 'tools/forbid/id/' + this.editForm.id
          data = this.editForm
        }
        this.$post(url_, data).then((response) => {
          if (response.code === 0) {
            _self.editFormVisible = false
            _self.getVisible = false
            _self.InitFn()
          } else {
            _self.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 本地预览图片
      getObjectURL (file) {
        let url = null
        if (window.createObjectURL !== undefined) {
          url = window.createObjectURL(file)
        } else if (window.URL !== undefined) {
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL !== undefined) {
          url = window.webkitURL.createObjectURL(file)
        }
        return url
      },
      // 添加教辅具
      addSubmit () {
        let _self = this
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            console.log('添加教辅具')
            // 上传图片
            _self.imguploading('add')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 领用转借
      editSubmit () {
        // 验证信息
        let _self = this
        console.log('领用判断:')
        console.log('formData:', this.addForm)
        console.log('goodsListNumber:', Number(this.goodsListNumber))
        console.log('num:', Number(this.addForm.num))
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            console.log('申请领用信息')
            if (Number(this.editForm.number) > Number(this.goodsListNumber)) {
              _self.$message.error('数量超过教辅具数据，请重新填写')
              return false
            }
            _self.imguploading('apply')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // index分页
      handleSizeChange (val) {
        this.page = val
        console.log(val)
        this.InitFn()
      },
      // 显示领用列表
      lingyongList (row) {
        console.log('收到的数据转换', row)
        this.$router.push('/getlistDetailCheck?id=' + JSON.stringify(row) + '&type=checked')
      },
      // 导出excel文件
      downexcel () {
        // book/export
        let that = this
        this.iframeState = true
        this.iframeSrc = 'http://doc.layoxx.com/admin/tools/export'
        setTimeout(() => {
          that.iframeState = false
          that.iframeSrc = ''
        }, 500)
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">

  .editimgbox {
    width: 80px;
  }

  .iframeBoxBody {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    z-index: 9999;
    img {
      width: 50px;
      height: 50px;
      margin-bottom: 30px;
      cursor: pointer;
    }
    .iframeBoxLine_img {
      width: 400px;
      background: #fff;
      display: block;
      height: auto;
    }
  }
</style>

